:root {
    --primary-color: #005BAC;
    --secondary-color: #D7000F;
    --title-color: #333;
    --main-color: #666;
    --info-color: #999;
    --tips-color: #ccc;
    --grey-color: #f2f3f5;
    --font-white-color: #fff;
    --bg-white-color: #fff;
    --rgba5-black-color: rgba(0, 0, 0, .5);
    --rgba7-black-color: rgba(0, 0, 0, .7);
    --rgba1-white-color: rgba(255, 255, 255, .1);
    --rgba3-white-color: rgba(255, 255, 255, .3);
    --rgba5-white-color: rgba(255, 255, 255, .5);
    --rgba7-white-color: rgba(255, 255, 255, .7);
    --rgba1-primary-color: rgba(0, 91, 172, .1);
    --rgba3-primary-color: rgba(0, 91, 172, .3);
    --rgba5-primary-color: rgba(0, 91, 172, .5);
    --rgba7-primary-color: rgba(0, 91, 172, .7);
    --rgba1-secondary-color: rgba(215, 0, 15, .1);
    --rgba3-secondary-color: rgba(215, 0, 15, .3);
    --rgba5-secondary-color: rgba(215, 0, 15, .5);
    --rgba7-secondary-color: rgba(215, 0, 15, .7);
    --border-white-color: #fff;
    --border-grey-color: #eee;
    --nav-height: 5rem;
    --top-height: 5rem;
    --space-lg: .45rem;
    --shadow-md: 0px 12px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0px 22px 30px rgba(0, 0, 0, 0.1);
    --liner-bg-color: linear-gradient(0deg, rgba(0, 0, 0, 0.57) 0%, rgba(255, 255, 255, 0) 100%);
    --liner-service-color: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    --liner-page-color: linear-gradient(0deg, rgba(0, 91, 172, 0.8) 0%, rgba(0, 91, 172, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    --liner-right-color: linear-gradient(to right, var(--grey-color), rgba(0, 0, 0, 0));
    --liner-left-color: linear-gradient(to left, var(--grey-color), rgba(0, 0, 0, 0));
    --timeline-color: #ddd;
    --foot-color: #27272b;
    --wechat-color: #04C15F;
    --qq-color: #009CFF;
    --tiktok-color: #000;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px !important;
    font-weight: 500;
    color: var(--main-color);
    font-family: Microsoft YaHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.lang__en {
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
    font-weight: 300;
}

[class*=mega__nav--desktop]::before {
    display: none;
    content: "mobile"
}

@font-face {
    font-family: countNum;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/number.woff2) format('woff2'), url(../fonts/number.woff) format('woff')
}

.web--loading {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: hidden;
    z-index: 999999;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading__spinner {
    width: 40px;
    height: 40px;
    background-color: var(--bg-white-color);
    border-radius: 2px;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.pc--show {
    display: none !important;
}

.mobile--show {
    display: block !important;
}

@media (min-width: 992px) {
    html {
        font-size: 16px !important;
    }

    .pc--show {
        display: block !important;
    }

    .customer__box.pc--show {
        display: flex !important;
    }

    .mobile--show {
        display: none !important;
    }
}

@media(min-width:1200px) {
    .mega__nav--desktop\@lg::before {
        content: "desktop"
    }
}

@media (min-width: 1300px) {
    :root {
        --space-lg: .75rem;
    }
}

@media (min-width: 1400px) {
    :root {
        --space-lg: 1rem;
    }
}

@media (min-width: 1600px) {
    :root {
        --space-lg: 1.5rem;
    }
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

button {
    background-color: transparent;
}

.full__height {
    height: 100%;
}

.full__width {
    width: 100%;
}

.flex__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.row.flex--inverts {
    flex-direction: row-reverse;
}

.cover__img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.contain__img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

.primary__color {
    color: var(--primary-color) !important;
}

.secondary__color {
    color: var(--secondary-color) !important;
}

.title__color {
    color: var(--title-color) !important;
}

.main__color {
    color: var(--main-color) !important;
}

.info__color {
    color: var(--info-color) !important;
}

.module__box {
    padding: 4rem 0;
}

.white__bg {
    background-color: var(--bg-white-color) !important;
}

.grey__bg {
    background-color: var(--grey-color) !important;
}

.primary__bg {
    background-color: var(--primary-color) !important;
}

.secondary__bg {
    background-color: var(--secondary-color) !important;
}

.title__bg {
    background-color: var(--title-color) !important;
}

.main__bg {
    background-color: var(--main-color) !important;
}

.info__bg {
    background-color: var(--info-color) !important;
}

.disbaled__btn {
    color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

.disbaled__btn::after {
    display: none !important;
}

.default__button {
    padding: .75rem 1.5rem;
    display: inline-block;
    z-index: 2;
    line-height: 1em;
    font-size: 0.875rem;
    letter-spacing: 2px;
    position: relative;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    overflow: hidden;
    font-weight: bold;
    border-radius: 2px;
}

.default__button:hover:after {
    -webkit-animation-name: bgin;
    animation-name: bgin;
    -webkit-transform: skew(-45deg) translate(-50%);
    transform: skew(-45deg) translate(-50%);
}

.default__button:after {
    content: '';
    z-index: -1;
    width: 150%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-animation-name: bgout;
    animation-name: bgout;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-transform: skew(-45deg) translate(-150%);
    transform: skew(-45deg) translate(-150%);
}

.default__button.primary__block {
    color: var(--font-white-color);
    border: 2px solid var(--primary-color);
    background-color: var(--primary-color);
}

.default__button.primary__block:hover {
    color: var(--primary-color);
    background-color: transparent;
}

.default__button.secondary__block {
    color: var(--font-white-color);
    border: 2px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.default__button.secondary__block:hover {
    color: var(--secondary-color);
    background-color: transparent;
}

.default__button.primary__line {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.default__button.primary__line:hover {
    color: var(--font-white-color);
}

.default__button.primary__line::after {
    background-color: var(--primary-color);
}

.default__button.white__line {
    color: var(--font-white-color);
    border: 2px solid var(--border-white-color);
}

.default__button.white__line:hover {
    color: var(--primary-color);
}

.default__button.white__line::after {
    background-color: var(--bg-white-color);
}

.default__button.white__block {
    color: var(--main-color);
    background-color: var(--bg-white-color);
    border: 0;
}

.default__button.white__block:hover {
    color: var(--font-white-color);
}

.default__button.white__block::after {
    background-color: var(--primary-color);
}

@-webkit-keyframes bgin {
    from {
        -webkit-transform: skew(-45deg) translate(-150%);
        transform: skew(-45deg) translate(-150%);
    }

    to {
        -webkit-transform: skew(-45deg) translate(-50%);
        transform: skew(-45deg) translate(-50%);
    }
}

@keyframes bgin {
    from {
        -webkit-transform: skew(-45deg) translate(-150%);
        transform: skew(-45deg) translate(-150%);
    }

    to {
        -webkit-transform: skew(-45deg) translate(-50%);
        transform: skew(-45deg) translate(-50%);
    }
}

@-webkit-keyframes bgout {
    from {
        -webkit-transform: skew(-45deg) translate(-50%);
        transform: skew(-45deg) translate(-50%);
    }

    to {
        -webkit-transform: skew(-45deg) translate(50%);
        transform: skew(-45deg) translate(50%);
    }
}

@keyframes bgout {
    from {
        -webkit-transform: skew(-45deg) translate(-50%);
        transform: skew(-45deg) translate(-50%);
    }

    to {
        -webkit-transform: skew(-45deg) translate(50%);
        transform: skew(-45deg) translate(50%);
    }
}

.lang--switch .tips__split {
    margin: 0 .5rem;
}

.lang--switch a {
    color: var(--primary-color);
    transition: all .3s;
}

.lang--switch a:hover {
    color: var(--secondary-color);
}

.mega__nav {
    height: var(--nav-height);
    box-shadow: inset 0 -1px 0 var(--grey-color);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--bg-white-color);
    z-index: 999;
    padding: 0 1.5rem;
}

.nav__height {
    height: var(--top-height);
    width: 100%;
}

.mega__nav.mega__nav--desktop .container {
    width: calc(100% - 3rem);
}

.mega__nav.mega__nav--mobile .container {
    width: 100%;
    padding: 0;
}

.mega__nav .nav__logo img {
    height: 3rem;
    vertical-align: middle;
}

.mega__nav .nav__icon {
    display: flex;
    align-items: center;
}

.mega__nav--desktop .icon--mobile {
    display: none;
}

.mega__nav .nav__menu {
    flex-grow: 1;
    height: 100%;
    z-index: 99;
}

.mega__nav--desktop .nav__menu .nav__inner {
    height: 100%;
    display: flex;
    justify-content: center;
}

.mega__nav--desktop .nav__menu .nav__inner .nav__items {
    display: flex;
    height: 100%;
}

.mega__nav--desktop .nav__label,
.mega__nav--desktop .sub__items {
    display: none;
}

.nav__menu .nav__inner .nav__label {
    color: var(--primary-color);
}

.mega__nav--desktop .nav__items .nav__item {
    display: flex;
    align-items: center;
}

.mega__nav--desktop .nav__items .nav__item .nav__home {
    height: 100%;
}

.mega__nav--desktop .nav__control {
    height: 100%;
    padding: 0 var(--space-lg);
    font-size: 1.125rem;
    color: var(--title-color);
    transition: all .3s;
    position: relative;
    cursor: pointer;
    font-weight: bold;
}

.mega__nav--desktop .nav__control .mdui-icon {
    display: none;
}

.mega__nav--desktop .megaNavItemExpanded .nav__control {
    background-color: var(--grey-color);
}

.nav__menu .nav__items .nav__item .nav__control::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s
}

.mega__nav--desktop .megaNavItemExpanded .nav__control::after {
    opacity: 1 !important;
}

.mega__nav--desktop .nav__control:hover {
    background-color: var(--grey-color);
}

.mega__nav--desktop .nav__wrapper {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background-color: var(--bg-white-color);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--nav-height) - var(--nav-offset, 0px));
    overflow: hidden;
    display: none;
}

.megaNavItemExpanded .nav__wrapper {
    display: block;
}

.mega__nav--desktop .nav__sub {
    padding: 3rem .75rem;
}

.nav__sub,
.mega__nav--mobile .mega__nav--visible>* {
    animation: entryAnimation .5s ease-in-out;
}

@keyframes entryAnimation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

.nav__sub .sub__tabs .tabs__items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.nav__sub .sub__tabs .tabs__item {
    display: block;
    line-height: 4rem;
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--title-color);
    border-bottom: 1px solid var(--border-grey-color);
    position: relative;
    max-width: 15rem;
    transition: all .3s;
}

.lang__en .nav__sub .sub__tabs .tabs__item {
    max-width: 18rem;
}

.nav__sub .sub__tabs .tabs__item:last-child {
    border-bottom: none;
}

.nav__sub .sub__tabs .tabs__item .mdui-icon {
    position: absolute;
    right: 2rem;
    top: 50%;
    margin-top: -.75rem;
    transition: all .3s;
}

.lang__en .nav__sub .sub__tabs .tabs__item .mdui-icon {
    right: 1.5rem;
}

.nav__sub .sub__tabs .tabs__item:hover {
    color: var(--secondary-color);
}

.nav__sub .sub__tabs .tabs__item:hover .mdui-icon {
    right: 1.5rem;
}

.lang__en .nav__sub .sub__tabs .tabs__item:hover .mdui-icon {
    right: 1rem;
}

.nav__sub .sub__tabs .tabs__panels {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.nav__sub .sub__tabs .tabs__panels .tabs__img {
    height: 15rem;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
}

.nav__sub .sub__tabs .tabs__panels .tabs__img.large__img {
    height: 20rem;
}

.tabs__panels .tabs__component .component__title {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
}

.tabs__panels .tabs__component .component__text {
    line-height: 1.5em;
    font-size: 1rem;
    text-align: justify;
}

.nav__sub .sub__links {
    padding: 1rem 0;
}

.nav__sub .sub__links .sub__label {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: bold;
    display: block;
}

.nav__sub .sub__links .sub__link {
    display: block;
    color: var(--info-color);
    line-height: 1.5rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    transition: all .3s;
}

.nav__sub .sub__links .sub__link:hover {
    color: var(--secondary-color);
}

.nav__sub .sub__card {
    display: block;
}

.nav__sub .sub__card .card__img {
    width: 100%;
    height: 10rem;
    background-color: var(--grey-color);
    border-radius: .5rem;
    overflow: hidden;
}

.nav__sub .sub__card .card__img img {
    transition: all .3s;
}

.nav__sub .sub__card .card__img:hover img {
    transform: scale(1.1);
    opacity: .6;
}

.nav__sub .sub__card .card__link {
    color: var(--title-color);
    margin: 1rem auto 1.5rem;
    transition: all .3s;
    font-weight: bold;
    font-size: 1.25rem;
}

.nav__sub .sub__card .card__link .mdui-icon {
    margin-top: -4px;
    transform: rotate(180deg);
}

.nav__sub .sub__card .card__link:hover {
    color: var(--secondary-color);
}

.nav__sub .sub__full {
    display: block;
    padding-top: 2rem;
    border-top: 1px solid var(--border-grey-color);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--title-color);
    text-align: center;
    transition: all .3s;
}

.nav__sub .sub__full .mdui-icon {
    margin-top: -4px;
    transform: rotate(180deg);
}

.nav__sub .sub__full:hover {
    color: var(--secondary-color);
}

.mega__nav--mobile .nav__menu {
    display: none;
}

.nav__icon .icon__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--info-color);
    cursor: pointer;
    transition: all .3s;
}

.nav__icon .icon__btn .icon {
    font-size: 1.5rem;
    height: 1em;
    width: 1em;
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial
}

.icon__btn .icon__group {
    stroke-width: 1px;
}

.icon__btn .icon__group>* {
    transition: all .3s ease-in-out;
}

.icon__btn .icon__group>* {
    stroke-dasharray: 24;
}

.icon__btn .icon__group>*:nth-child(1) {
    transform-origin: .75rem .475rem;
}

.icon__btn .icon__group>*:nth-child(2) {
    stroke-dashoffset: 0;
}

.icon__btn .icon__group>*:nth-child(3) {
    transform-origin: .75rem 1.225rem;
}

.icon__btn.mega__nav--state .icon__group>*:nth-child(1) {
    transform: translateY(.475rem) rotate(-45deg);
}

.icon__btn.mega__nav--state .icon__group>*:nth-child(2) {
    stroke-dashoffset: 24;
}

.icon__btn.mega__nav--state .icon__group>*:nth-child(3) {
    transform: translateY(-.475rem) rotate(45deg);
}

.mega__nav--mobile .mega__nav--visible {
    display: block;
}

.mega__nav--mobile .nav__menu {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height) - var(--nav-offset, 0px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--bg-white-color);
    box-shadow: var(--shadow-lg);
}

.mega__nav--mobile .nav__inner {
    padding: 1.5rem;
}

.mega__nav--mobile .nav__label {
    margin: 2rem 0 1rem;
}

.mega__nav--mobile .nav__item {
    border-bottom: 1px solid var(--border-grey-color);
}

.mega__nav--mobile .nav__control {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    font-size: 1rem;
    padding: 1rem 0;
    color: var(--title-color);
}

.mega__nav--mobile .nav__control .mdui-icon {
    color: var(--info-color);
    transition: all .3s;
}

.mega__nav--mobile .megaNavItemExpanded .mdui-icon {
    transform: rotate(180deg);
}

.mega__nav--mobile .nav__wrapper {
    display: none;
    padding: 0 1rem 1.5rem;
    overflow: hidden;
}

.mega__nav--mobile .megaNavItemExpanded .nav__wrapper {
    display: block;
}

.mega__nav--mobile .sub__tabs {
    display: none;
}

.sub__items .sub__item {
    color: var(--info-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--grey-color);
    display: block;
}

.index__banner .swiper-slide {
    height: 15rem;
    width: 100%;
}

.module {
    padding: 2rem 0;
}

@media (min-width: 576px) {
    .index__banner .swiper-slide {
        height: 18rem;
    }
}

@media (min-width: 992px) {
    .index__banner .swiper-slide {
        height: 25rem;
    }

    .module {
        padding: 4rem 0;
    }
}

@media (min-width: 1200px) {
    .index__banner .swiper-slide {
        height: 30rem;
    }
}

@media (min-width: 1400px) {
    .index__banner .swiper-slide {
        height: 40rem;
    }
}

.index__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.index__title .title {
    position: relative;
    flex-grow: 1;
    padding-left: 1rem;
}

.index__title .title p:first-child {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.index__title .title p:last-child {
    color: var(--info-color);
    font-size: .875rem;
    max-width: 11.5rem;
}

@media (min-width: 992px) {

    .index__title .title p:first-child {
        font-size: 2rem;
    }

    .index__title .title p:last-child {
        max-width: 100%;
    }
}

.index__title .title::before {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 6px;
    border-radius: 3px;
    height: 100%;
    background-color: var(--secondary-color);
}

.index__application {
    position: relative;
}

.index__application .application__bg {
    position: absolute;
    height: 40rem;
    left: -5rem;
    bottom: -20rem;
}

.index__application .application__accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    contain: content;
}

.application__accordion .accordion__panel {
    position: relative;
    overflow: hidden;
    height: 4rem;
    cursor: pointer;
    color: var(--font-white-color);
    border-radius: 2rem;
    transition: all 0.5s;
}

.accordion__panel.accordion--open {
    height: 18rem;
    flex-grow: 1;
}

.lang__en .accordion__panel.accordion--open {
    height: 24rem;
    flex-grow: 1;
}

.accordion__panel.accordion--open .accordion__content {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
    text-align: justify;
}

.accordion__panel.accordion--open .accordion__img {
    filter: brightness(0.5);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    transition: all .5s;
    margin: .5rem;
    background-color: var(--rgba7-white-color);
    border-radius: 2rem;
    width: 13rem;
}

.accordion__panel.accordion--open .accordion__trigger .accordion__title {
    display: block;
}

.accordion__trigger .iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    width: 3rem;
    height: 3rem;
    color: var(--primary-color);
    background-color: var(--bg-white-color);
    border-radius: 1.5rem;
}

.accordion__title {
    font-size: 1.25rem;
    color: var(--primary-color);
    display: block;
    margin-left: 1.5rem;
    font-weight: bold;
    transition: transform .5s .5s, opacity .5s .5s, width .5s .5s;
}

.accordion__content {
    transform: translateY(4rem);
    opacity: 0;
    line-height: 1.5rem;
    padding: 1rem;
    text-align: justify;
}

.accordion__img {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s;
    transition-timing-function: cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

@media (min-width: 992px) {
    .accordion__trigger {
        background-color: transparent;
    }

    .accordion__title {
        font-size: 2rem;
        display: none;
        color: var(--font-white-color);
    }

    .index__application .application__accordion {
        flex-direction: row;
    }

    .accordion__content {
        padding: 0 6rem;
    }

    .accordion__trigger .iconfont {
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        border-radius: 2rem;
    }

    .application__accordion .accordion__panel {
        width: 5rem;
        height: 25rem;
        border-radius: 2.5rem;
    }
}

.index__company {
    background-image: url('../images/index__bg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--font-white-color);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.index__company .company__bg {
    position: absolute;
    height: 40rem;
    right: -20rem;
    top: -20rem;
}

.index__company .company__title {
    font-weight: bold;
    font-size: 2rem;
}

.index__company .company__tips {
    font-size: .875rem;
    margin-top: 0.5rem;
}

.index__company .company__text {
    line-height: 1.5rem;
    margin-bottom: 2rem;
    text-align: justify;
}

.video__btn {
    width: 5rem;
    height: 5rem;
    border-radius: 2.5rem;
    margin: 4rem auto;
    background-color: var(--bg-white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    position: relative;
    z-index: 3;
}

.video__btn::before,
.video__btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    border-radius: 100%;
}

.video__btn::before {
    -webkit-animation: ripple 2s linear infinite;
    animation: ripple 2s linear infinite;
    background-color: var(--rgba3-white-color);
}

.video__btn::after {
    -webkit-animation: ripple 2s linear 1s infinite;
    animation: ripple 2s linear 1s infinite;
    background-color: var(--rgba1-white-color);
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

.video__btn .iconfont {
    font-size: 1rem;
}

.video__title {
    display: flex;
    justify-content: space-between;
}

.video__title .mdui-icon {
    cursor: pointer;
}

.video__iframe {
    width: 100%;
    height: 15rem;
}

@media (min-width: 992px) {
    .video__iframe {
        width: 100%;
        height: 25rem;
    }
}

.company__video {
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

.index__products {
    background-color: var(--grey-color);
    position: relative;
    overflow: hidden;
}

.index__products .products__rbg {
    position: absolute;
    height: 40rem;
    right: -20rem;
    bottom: -20rem;
}

.index__products .products__lbg {
    position: absolute;
    height: 40rem;
    left: -5rem;
    top: -20rem;
}

.index__products .products__card {
    border-radius: .5rem;
    background-color: var(--bg-white-color);
    height: 20rem;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.index__products .products__card .card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 17rem;
}

.index__products .products__card .card__img img {
    height: 100%;
    display: block;
}

.index__products .products__card .card__overlay {
    position: absolute;
    top: 17rem;
    padding: 0 1.5rem;
    height: 3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 100%;
    background-color: var(--rgba7-black-color);
    transition: all .3s;
}

.index__products .products__card .card__overlay .overlay__title {
    color: var(--font-white-color);
    line-height: 1em;
    font-size: 1.25rem;
    font-weight: bold;
    margin: .875rem auto;
}

.index__products .products__card .card__overlay .overlay__text {
    line-height: 1.5rem;
    color: var(--font-white-color);
    font-size: .875rem;
    text-align: justify;
}

.lang__en .index__products .products__card .card__overlay .overlay__title {
    font-size: 1.125rem;
}

.index__products .products__card:hover .card__overlay {
    height: 100%;
    top: 0;
    justify-content: center;
    align-items: start;
}

.index__contact {
    background-image: url('../images/footer_1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.index__contact .contact__bg {
    position: absolute;
    height: 40rem;
    right: -20rem;
    top: -20rem;
}

.index__contact .contact__bg2 {
    position: absolute;
    height: 40rem;
    left: -5rem;
    bottom: -20rem;
}

.index__contact .contact__text {
    color: var(--font-white-color);
    font-size: 1.5rem;
    max-width: 45rem;
    margin: 0 auto 4rem;
    line-height: 1.5em;
}

.index__contact .contact__logo {
    width: 100%;
    max-width: 5rem;
    margin-bottom: 1rem;
}

.index__news {
    background-color: var(--grey-color);
    position: relative;
}

.index__news .news__card {
    background-color: var(--bg-white-color);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    transition: all .3s;
    display: block;
}

.index__news .news__card .card__date {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 2rem;
}

.index__news .news__card .card__date::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 4px;
    border-radius: 2px;
    left: 0;
    bottom: 1rem;
    background-color: var(--border-grey-color);
}

.index__news .news__card .card__date .date__day {
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary-color);
    transition: all .3s;
}

.index__news .news__card .card__date .date__month {
    color: var(--primary-color);
    font-weight: bold;
    margin-top: .5rem;
    transition: all .3s;
}

.index__news .news__card .card__title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--title-color);
    line-height: 1.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    height: 3em;
    transition: all .3s;
}

.index__news .news__card .card__text {
    line-height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5rem;
    height: 4.5rem;
    margin: 1rem auto;
    color: var(--main-color);
    transition: all .3s;
    text-align: justify;
}

.index__news .news__card .card__img {
    width: 100%;
    height: 12rem;
    border-radius: 1rem;
    overflow: hidden;
}

.index__news .news__card .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img--scale {
    object-fit: scale-down !important;
    background: var(--grey-color);
}

.index__news .news__card:hover {
    background-color: var(--primary-color);
}

.index__news .news__card:hover .date__day,
.index__news .news__card:hover .date__month,
.index__news .news__card:hover .card__title,
.index__news .news__card:hover .card__text {
    color: var(--font-white-color);
}

.footer {
    background-color: var(--foot-color);
    padding-top: 4rem;
    color: var(--font-white-color);
}

.footer .footer__logo {
    height: 4rem;
}

.footer .footer__text {
    line-height: 1.5em;
    font-size: .875rem;
    margin: 1rem 0 2rem 0;
    text-align: justify;
}

.footer .footer__links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
    text-align: center;
}

.footer__links .links {
    flex: 0 0 auto;
    width: calc(100% / 3);
}

.links .footer__title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-top: 2rem;
}

.links .link__item {
    color: var(--font-white-color);
    display: block;
    font-size: .875rem;
    line-height: 1.5em;
    margin: .75rem 0;
    transition: all .3s;
}

.links .link__item:hover {
    color: var(--secondary-color);
}

.footer .footer__contact {
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

.footer .footer__contact .mdui-icon {
    margin: -2px 6px 0 0;
}


.footer .footer__copyright {
    border-top: 1px solid var(--bg-white-color);
    padding: 1.5rem 0;
    margin-top: 2rem;
    line-height: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer .footer__copyright .copyright__icp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.footer .footer__copyright .copyright__icp a {
    color: var(--font-white-color);
    padding: .5rem 0;
}

.footer .footer__copyright .copyright__icp a:hover {
    color: var(--secondary-color);
}

.footer .footer__copyright .copyright__icp img {
    margin: 0 .5rem 0 0;
    vertical-align: middle;
}

@media(min-width:992px) {
    .footer .footer__links {
        padding-left: 2rem;
    }

    .footer__links .links {
        width: calc(100% / 6);
    }

    .links .footer__title {
        font-size: 1.25rem;
    }

    .footer .footer__copyright {
        justify-content: space-between;
    }

    .footer .footer__copyright .copyright__icp img {
        margin: 0 .5rem 0 2rem;
    }
}

.page__banner {
    height: 15rem;
    position: relative;
}

@media(min-width:992px) {
    .page__banner {
        height: 20rem;
    }
}

.page__banner .banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__banner .banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    background: var(--liner-page-color);
}

.page__banner .banner__title {
    position: relative;
    padding-left: 1.5rem;
    color: var(--font-white-color);
}

.page__banner .banner__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    border-radius: 3px;
    background-color: var(--secondary-color);
}

.page__banner .banner__title .title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: .5rem;
}

.page__banner .banner__title .breadcrumbs {
    line-height: 1.5rem;
}

.page__banner .banner__title .breadcrumbs a,
.page__banner .banner__title .breadcrumbs span {
    display: inline-block;
    color: var(--font-white-color);
    transition: all .3s;
}

.page__banner .banner__title .breadcrumbs a:hover {
    color: var(--secondary-color);
}

.page__title {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.page__text {
    line-height: 1.5rem;
    margin: 2rem auto;
    text-align: justify;
}

.page__company {
    background-color: var(--grey-color);
    padding-bottom: 0;
}

.page__company .video__btn {
    background-color: var(--primary-color);
    color: var(--bg-white-color);
}

.page__company .video__btn::before {
    background-color: var(--rgba3-primary-color);
}

.page__company .video__btn::after {
    background-color: var(--rgba1-primary-color);
}

.count__bg {
    padding-bottom: 2rem;
    background-color: var(--primary-color);
}

.count__bg .page__count {
    background-color: transparent;
}

.count__bg .page__count .count__num,
.count__bg .page__count .count__text,
.count__bg .page__count .count__unit {
    color: var(--font-white-color);
}

.company__center .center__flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}

.center__flex .center__contain {
    background-color: var(--bg-white-color);
    position: relative;
    padding: 2rem;
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
}

.img__circle {
    display: none;
}

.center__contain h2 {
    color: var(--primary-color);
    position: relative;
    padding-left: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5em;
    transition: .6s;
    z-index: 1;
    margin-right: 0;
}

.center__contain h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    border-radius: 2px;
    background-color: var(--secondary-color);
}

.center__contain .center__text {
    line-height: 1.5rem;
    margin-bottom: 1rem;
    transition: .6s;
    z-index: 1;
    position: relative;
    margin-right: 0;
    text-align: justify;
}

@media (min-width:992px) {
    .img__circle {
        display: block;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        transition: 0.6s;
        z-index: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        right: 0;
        clip-path: circle(calc(.5rem + 7.5vw) at 100% 100%);
    }

    .center__contain:hover .img__circle {
        clip-path: circle(110vw at 100% 100%);
    }

    .center__contain h2,
    .center__contain .center__text {
        margin-right: 2.5rem;
    }

    .center__contain:hover .center__text,
    .center__contain:hover h2 {
        color: var(--font-white-color) !important;
    }
}

.page__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    background-color: var(--bg-white-color);
    padding: 2rem 0;
    border-radius: 4px;
}

.page__count .count__num {
    font-size: 2rem;
    color: var(--secondary-color);
    padding: 1.5rem 0;
    position: relative;
    line-height: 1em;
    font-family: countNum;
}

.page__count .count__num::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 2px;
    border-radius: 1px;
    background-color: var(--secondary-color);
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
}

.page__count .count__text {
    color: var(--primary-color);
    margin-bottom: 0;
    font-size: .875rem;
}

.lang__en .page__count .count__text {
    text-align: center;
    height: 3em;
    line-height: 1.5em;
}

.page__count .count__unit {
    color: var(--primary-color);
}

.page__company .company__bottom {
    background-image: url(../images/about_6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 20rem;
    display: flex;
    align-items: center;
}

.page__company .company__bottom p {
    line-height: 1.5rem;
    margin: 1rem auto;
    text-align: justify;
    color: var(--font-white-color);
}

.page__history {
    background-color: var(--grey-color);
}

.history {
    opacity: 0;
    transition: opacity 0.2s;
    max-width: 70rem;
    margin: auto;
}

.timeline--loaded {
    opacity: 1;
}

.history__timeline {
    position: relative;
    height: 6.25rem;
}

.timeline__dates {
    position: relative;
    height: 100%;
    margin: 0 3rem;
    overflow: hidden;
}

.timeline__dates::after,
.timeline__dates::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 2rem;
}

.timeline__dates::before {
    left: 0;
    background: var(--liner-right-color);
}

.timeline__dates::after {
    right: 0;
    background: var(--liner-left-color);
}

.dates__line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: calc(50% - 1px);
    height: 2px;
    background-color: var(--timeline-color);
    transition: transform 0.4s;
}

.line__filling {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s;
}

.date {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    padding-bottom: 1.25rem;
    color: var(--info-color);
    user-select: none;
}

.date::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -.375rem;
    height: .75rem;
    width: .75rem;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: var(--timeline-color);
    background-color: var(--grey-color);
    transition: all .3s;
}

.date--selected {
    pointer-events: none;
}

.date:hover::after,
.date--selected::after {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.date--older::after {
    border-color: var(--primary-color);
}

.timeline__nav {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: var(--timeline-color);
    transition: border-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline__nav:hover {
    border-color: var(--primary-color);
}

.timeline__nav.next__nav {
    right: 0
}

.timeline__nav--inactive {
    cursor: not-allowed
}

.timeline__nav--inactive:hover {
    border-color: var(--timeline-color);
}

.timeline__nav .mdui-icon {
    color: var(--primary-color);
}

.timeline__nav.timeline__nav--inactive .mdui-icon {
    color: var(--timeline-color);
}

.history__events {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: height .4s
}

.event {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    padding: 1px 5%;
    opacity: 0;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out
}

.event--selected {
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateX(0)
}

.enter--right,
.leave--right {
    -webkit-animation-name: enterRight;
    animation-name: enterRight
}

.enter--left,
.leave--left {
    -webkit-animation-name: enterLeft;
    animation-name: enterLeft
}

.leave--right,
.leave--left {
    animation-direction: reverse
}

.event__title {
    color: var(--title-color);
    font-weight: bold;
    font-style: 1.5rem;
    line-height: 1.5em;
    margin-bottom: 2.5rem;
}

.event__date {
    display: block;
    font-style: italic;
    margin: .5rem auto 1rem;
}

.event__date::before {
    content: '- '
}

.event__description p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

.event__description img {
    display: block;
    max-width: 100%;
    margin: auto;
    height: auto;
}

@-webkit-keyframes enterRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes enterRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@-webkit-keyframes enterLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes enterLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

.page__honor {
    background-color: var(--grey-color);
}

.page__honor .honor__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.page__honor .honor__text p {
    text-align: justify;
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

.split__gallery {
    display: flex;
    flex-wrap: wrap;
}

.split__gallery .gallery__box {
    width: 50%;
    padding: .75rem;
}

.gallery__box .lightbox {
    display: block;
    width: 100%;
    height: 12rem;
    background-color: var(--bg-white-color);
    overflow: hidden;
}

.gallery__box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all .3s;
}

.gallery__box .honor__title {
    color: var(--title-color);
    text-align: center;
    padding: 1rem .5rem;
    font-weight: bold;
    border-bottom: 1px solid var(--primary-color);
    transition: all .3s;
}

.gallery__box:hover img {
    transform: scale(1.1);
}

.gallery__box:hover .honor__title {
    color: var(--primary-color);
}

.page__manufacture {
    background-color: var(--grey-color);
}

.page__manufacture .page__rubric {
    margin: 3rem 0 2rem;
}

.page__manufacture .page__count {
    margin-top: 1.5rem;
    height: 10rem;
    justify-content: center;
}

.manufacture__img {
    height: 21.5rem;
    margin-top: 1.5rem;
    background-image: url('../images/manufacture/manufacture.jpg');
    border-radius: .5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.photo__gallery {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--bg-white-color);
    border-radius: .5rem;
}

.photo__gallery .gallery__box {
    width: 50%;
}

@media (min-width: 576px) {
    .photo__gallery .gallery__box {
        width: 33.333333334%;
    }

    .split__gallery .gallery__box {
        width: 33.33333334%;
    }
}

@media (min-width: 992px) {
    .photo__gallery .gallery__box {
        width: 25%;
    }
}

@media (min-width: 1200px) {
    .photo__gallery .gallery__box {
        width: 20%;
    }
}

@media (min-width: 1400px) {
    .split__gallery .gallery__box {
        width: 25%;
    }
}

.photo__gallery .gallery__box img {
    object-fit: cover;
}

.page__branch {
    background-color: var(--grey-color);
}

.page__contact .mdui-tab {
    background-color: var(--bg-white-color);
    border-bottom: 1px solid var(--border-grey-color);
}

.page__contact .mdui-tab a {
    font-size: 1rem;
    padding: 1rem;
    font-weight: bold;
    z-index: 2;
}

.page__contact .mdui-tab .mdui-tab-indicator {
    height: 100%;
    background-color: var(--primary-color);
}

.page__contact .mdui-tab .mdui-tab-active {
    color: var(--font-white-color);
}

.branch__img {
    padding: 3rem;
    background-color: var(--bg-white-color);
    text-align: center;
}

.branch__img img {
    max-width: 100%;
}

.page__team .team__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.page__team .team__text p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.page__team .team__img {
    border-radius: .5rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.lang__en .page__team .team__img {
    height: 30rem;
}

.page__team .team__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page__team .team__content {
    position: relative;
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    height: 15rem;
}

.page__team .team__content .content__count {
    height: 100%;
    width: 100%;
    background-color: var(--rgba5-black-color);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--font-white-color);
    padding: 2rem;
}

.content__count .count__percent {
    font-size: 3.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .page__team .team__content {
        height: 18rem;
    }

    .content__count .count__percent {
        font-size: 4.5rem;
    }
}

@media (min-width: 1200px) {
    .page__team .team__content {
        height: 22rem;
    }
}

.page__team .team__content img {
    max-width: 100%;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__advantage {
    background-color: var(--grey-color);
}

.page__advantage .advantage__bg {
    position: relative;
    height: 20rem;
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.page__advantage .advantage__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__advantage .advantage__bg .bg__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--rgba7-primary-color);
    color: var(--font-white-color);
    padding: 3rem;
}

.advantage__title {
    font-weight: bold;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 4rem;
    margin-bottom: 1rem;
}

.advantage__title::before {
    position: absolute;
    content: '';
    bottom: 3rem;
    width: 2rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--bg-white-color);
}

.advantage__title::after {
    content: attr(data-content);
    position: absolute;
    bottom: 1rem;
    font-size: .875rem;
    left: 0;
}

.lang__en .advantage__title::after {
    bottom: .5rem;
}

@media (min-width: 992px) {
    .lang__en .advantage__title::after {
        bottom: 1rem;
    }
}

.advantage__text p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.advantage__title {
    color: var(--font-white-color);
}

.advantage__title::before,
.img__text .advantage__title::before {
    background-color: var(--primary-color);
}

.advantage__title::after,
.img__text .advantage__title::after {
    color: var(--font-white-color);
}

.advantage__img {
    border-radius: .5rem;
    background-color: var(--bg-white-color);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 1.5rem;
}

.advantage__img .img__text {
    padding: 2rem;
    max-width: 100%;
    margin-right: 0;
    color: var(--font-white-color);
    background-color: var(--rgba7-black-color);
}

@media (min-width: 576px) {

    .advantage__title {
        color: var(--title-color);
    }

    .advantage__img .img__text {
        padding: 3rem;
        margin-right: 1.5rem;
        max-width: 70%;
        background-color: transparent;
    }

    .advantage__title::after,
    .img__text .advantage__title::after {
        color: var(--info-color);
    }

    .advantage__img .img__text {
        color: var(--main-color);
    }

    .advantage__img {
        background-size: contain;
        background-position: top right;
    }
}

.advantage__all {
    background-image: url('../images/footer_1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--font-white-color);
    text-align: center;
    padding: 5rem 0;
}

.advantage__all .all__title {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 3rem;
    position: relative;
}

.advantage__all .all__title::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 6px;
    border-radius: 3px;
    background-color: var(--secondary-color);
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.advantage__all .all__text {
    line-height: 3rem;
    max-width: 70rem;
    margin: 0 auto 2rem auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.all__text span {
    width: 100%;
}

.all__text span:nth-child(4),
.all__text span:nth-child(5) {
    width: 100%;
}

@media (min-width: 992px) {
    .all__text span {
        width: 33.3333333%;
    }

    .all__text span:nth-child(4),
    .all__text span:nth-child(5) {
        width: 50%;
    }

    .lang__en .all__text span {
        width: 50%;
        text-align: left;
    }
}

.all__text span .mdui-icon {
    color: var(--secondary-color);
    margin: -2px 6px 0 0;
}

.page__achievement {
    background-color: var(--grey-color);
}

.table__box {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 2rem;
}

.default__table {
    width: 100%;
    background-color: var(--bg-white-color);
    border-collapse: collapse;
}

.default__table th {
    background-color: var(--primary-color);
    color: var(--bg-white-color);
    padding: 1.5rem;
    font-size: 1.125rem;
    font-weight: bold;
    white-space: nowrap;
}

.default__table td {
    padding: 1rem;
    text-align: center;
    white-space: nowrap;
}

.page__achievement .default__table tr td:nth-child(2) {
    text-align: left;
}

.default__table th,
.default__table td {
    border: 2px solid var(--border-grey-color);
}

.default__table tbody tr:hover {
    background-color: var(--grey-color);
}

.page__quality {
    background-color: var(--grey-color);
}

.page__quality .quality__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.page__quality .quality__text {
    line-height: 1.5rem;
}

.page__quality .quality__img {
    display: block;
    max-width: 100%;
    margin: 2rem auto;
}

.page__product {
    background-color: var(--grey-color);
}

.page__product .product__top {
    display: flex;
    justify-content: space-between;
}

.page__product .product__box {
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: block;
    transition: all .3s;
}

.page__product .product__box:hover {
    box-shadow: var(--shadow-md);
}

.page__product .product__box .product__img {
    width: 100%;
    height: 10rem;
    background-color: var(--grey-color);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.page__product .product__box .product__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page__product .product__box .product__title {
    color: var(--primary-color);
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.page__product .product__box .product__data {
    line-height: 1.5rem;
    font-size: .875rem;
    color: var(--main-color);
}

.page__product .product__category {
    padding: 2rem;
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.product__category .category__img {
    width: 100%;
    height: 15rem;
    margin-bottom: 2rem;
}

.product__category .category__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product__category .category__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .product__category .category__img {
        width: 30rem;
        height: 20rem;
        margin-bottom: 0;
    }

    .product__category .category__content {
        width: calc(100% - 32rem);
    }
}

.product__category .category__content .content__title {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 1rem;
    transition: all .3s;
}

.product__category .category__content .content__text {
    line-height: 2rem;
    color: var(--main-color);
    text-align: justify;
}

.product__category .category__content .content__btn {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
}

.pagination li a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    margin: 0 .25rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 4px;
    transition: all .3s;
}

.pagination li a.active {
    background-color: var(--primary-color);
    color: var(--font-white-color);
}

.pagination li a:hover {
    background-color: var(--primary-color);
    color: var(--font-white-color);
}

.pagination li a span {
    display: block;
    text-align: center;
    width: 1.5rem;
    line-height: 1.5rem;
}

@keyframes drift-fadeZoomIn {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes drift-fadeZoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    15% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes drift-loader-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    50% {
        transform: translate(-50%, -50%) rotate(-180deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes drift-loader-before {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.2) translateX(6px);
    }

    25% {
        transform: scale(1.3) translateX(8px);
    }

    40% {
        transform: scale(1.2) translateX(6px);
    }

    50% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.8) translateX(6px);
    }

    75% {
        transform: scale(0.7) translateX(8px);
    }

    90% {
        transform: scale(0.8) translateX(6px);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes drift-loader-after {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.2) translateX(-6px);
    }

    25% {
        transform: scale(1.3) translateX(-8px);
    }

    40% {
        transform: scale(1.2) translateX(-6px);
    }

    50% {
        transform: scale(1);
    }

    60% {
        transform: scale(0.8) translateX(-6px);
    }

    75% {
        transform: scale(0.7) translateX(-8px);
    }

    90% {
        transform: scale(0.8) translateX(-6px);
    }

    100% {
        transform: scale(1);
    }
}

.drift-zoom-pane {
    background-color: var(--rgba5-black-color);
    transform: translate3d(0, 0, 0);
}

.drift-zoom-pane.drift-opening {
    animation: drift-fadeZoomIn 180ms ease-out;
}

.drift-zoom-pane.drift-closing {
    animation: drift-fadeZoomOut 210ms ease-in;
}

.drift-zoom-pane-loader {
    display: none;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 1.25rem;
    animation: drift-loader-rotate 1800ms infinite linear;
}

.drift-zoom-pane-loader:before,
.drift-zoom-pane-loader:after {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 50%;
    border-radius: 1.25rem;
    background-color: var(--bg-white-color);
}

.drift-zoom-pane-loader:before {
    left: 0;
    animation: drift-loader-before 1800ms infinite linear;
}

.drift-zoom-pane-loader:after {
    right: 0;
    animation: drift-loader-after 1800ms infinite linear;
    animation-delay: -900ms;
}

.productDetail__area {
    background-color: var(--grey-color);
    border-radius: .5rem;
    padding: 2rem;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.productDetail__trigger {
    width: 100%;
    height: 20rem;
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    overflow: hidden;
}

.productDetail__trigger .trigger__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.productDetail__data {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
}

.productDetail__data h2 {
    color: var(--primary-color);
}

.productDetail__data .data__main {
    position: relative;
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    font-size: .875rem;
    line-height: 2rem;
}

.productDetail__data .data__main::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 4px;
    border-radius: 2px;
    background-color: var(--secondary-color);
    top: 0;
    left: 0;
}

.productDetail__data .productDetail__btns {
    display: flex;
    margin-bottom: 1rem;
    z-index: 0;
    justify-content: space-between;
    gap: 1rem;
}

.productDetail__data .productDetail__btns .primary__block {
    padding: .5rem 1rem;
}

@media (min-width: 576px) {
    .productDetail__data .productDetail__btns {
        justify-content: flex-start;
        gap: 1rem;
    }

    .productDetail__data .productDetail__btns .primary__block {
        padding: .75rem 1.5rem;
    }
}

@media (min-width: 992px) {
    .productDetail__area {
        flex-direction: row;
        justify-content: space-between;
    }

    .productDetail__trigger {
        width: 25rem;
        height: 25rem;
    }

    .productDetail__data {
        width: calc(100% - 27rem);
        margin-top: 0;
    }
}

@media (min-width: 1200px) {
    .productDetail__trigger {
        width: 30rem;
        height: 25rem;
    }

    .productDetail__data {
        width: calc(100% - 32rem);
        margin-top: 0;
    }
}

.productDetail__data .primary__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1rem;
    z-index: 0;
}

#applySample .mdui-dialog-actions .mdui-btn:first-child {
    color: var(--secondary-color);
}

#applySample .mdui-dialog-actions .mdui-btn:last-child {
    color: var(--primary-color);
}

#applySample .mdui-textfield-label {
    color: var(--primary-color);
}

#applySample .mdui-textfield-label span {
    color: var(--secondary-color);
}

#applySample .mdui-textfield-focus .mdui-textfield-input,
#applySample .mdui-textfield-focus .mdui-textfield-input:hover {
    border-bottom-color: var(--primary-color);
    box-shadow: 0 1px 0 var(--primary-color);
}

.productDetail__data .default__button .mdui-icon {
    margin-left: 1rem;
    line-height: 1rem;
}

.page__productDetail .productDetail__feature {
    margin-top: 3rem;
}

.page__rubric {
    position: relative;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    padding-left: 1rem;
}

.page__rubric::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 4px;
    border-radius: 2px;
    background-color: var(--secondary-color);
    top: 0;
    left: 0;
}

.productDetail__feature .feature__content {
    margin: 1.5rem 0;
    line-height: 2rem;
}

.productDetail__feature .feature__content p {
    text-align: justify;
}

.feature__content img {
    max-width: 100%;
}

.page__news {
    background-color: var(--grey-color);
}

.page__contain {
    display: flex;
    flex-direction: column-reverse;
}

.page__contain .page__left {
    width: 100%;
}

.page__contain .page__right {
    width: 100%;
}

@media (min-width: 992px) {
    .page__contain {
        justify-content: space-between;
        flex-direction: row-reverse;
    }

    .page__contain .page__left {
        width: 20rem;
    }

    .page__contain .page__right {
        width: calc(100% - 22rem);
    }
}

.slider__menu {
    background-color: var(--bg-white-color);
    padding: 2rem;
    border-radius: .5rem;
}

.slider__menu .menu {
    margin-top: 1.5rem;
}

.slider__menu .menu li a {
    display: flex;
    justify-content: space-between;
    line-height: 2.5rem;
    color: var(--info-color);
    transition: all .3s;
}

.slider__menu .menu li a.active {
    color: var(--secondary-color);
}

.slider__menu .menu li a:hover {
    color: var(--secondary-color);
}

.slider__menu .menu li a .mdui-icon {
    margin: -2px .5rem 0;
}

.slider__box {
    background-color: var(--bg-white-color);
    margin-top: 2rem;
    border-radius: .5rem;
    overflow: hidden;
}

.slider__box .slider__bg {
    height: 20rem;
    position: relative;
    background-image: url('../images/leftSlider.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.slider__box .slider__contain {
    padding: 2rem;
    text-align: center;
}

.slider__contain p {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--title-color);
    margin: 1.5rem 0;
}

.count {
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.count .count__tips {
    line-height: 1.5rem;
    padding: 2rem 2rem 0 2rem;
    text-align: justify;
}

.count .page__count {
    margin-top: 0;
}

.page__right .split__gallery {
    margin-left: -.75rem;
    margin-right: -.75rem;
    margin-bottom: 2rem;
}

.slider__news {
    background-color: var(--bg-white-color);
    padding: 2rem;
    border-radius: .5rem;
}

.slider__news .news__popular {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-grey-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.slider__news .news__popular:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.slider__news .news__popular .popular__img {
    width: 4rem;
    height: 4rem;
}

.news__popular .popular__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .5rem;
}

.news {
    background-color: var(--bg-white-color);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-radius: .5rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.news .news__img {
    width: 100%;
    height: 15rem;
}

.news .news__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--bg-white-color);
}

.news .news__contain {
    width: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .news .news__img {
        width: 20rem;
        height: 15rem;
    }

    .news .news__contain {
        width: calc(100% - 20rem);
    }

}

@media (min-width: 992px) {
    .news .news__img {
        width: 100%;
        height: 15rem;
    }

    .news .news__contain {
        width: 100%;
    }

}

@media (min-width: 1200px) {
    .news .news__img {
        width: 20rem;
        height: 15rem;
    }

    .news .news__contain {
        width: calc(100% - 20rem);
    }
}

.news .news__contain.img__clear {
    flex-direction: row;
    padding-bottom: 1rem;
    width: 100%;
}

.news .news__contain.img__clear .contain__main {
    width: calc(100% - 5rem);
}

.news__contain .contain__date {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 2rem;
    flex: 0 0 auto;
    width: 5rem;
}

.news__contain .contain__date::after {
    content: '';
    position: absolute;
    width: 3rem;
    height: 6px;
    border-radius: 3px;
    background-color: var(--border-grey-color);
    bottom: 1rem;
}

.news__contain .contain__date .date__day {
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: bold;
    line-height: 1em;
}

.news__contain .contain__date .date__month {
    color: var(--primary-color);
    margin-top: 0.5rem;
}

.news__contain .contain__main .main__title {
    font-size: 1.5rem;
    color: var(--title-color);
    font-weight: bold;
    transition: all .3s;
    line-height: 1em;
    height: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news__contain .contain__main .main__title:hover {
    color: var(--secondary-color);
}

.news__contain .contain__main .main__text {
    color: var(--main-color);
    line-height: 1.5rem;
    margin-top: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: justify;
}

.page__course .slider__news .news__popular .popular__content {
    width: 100%;
}

.page__course .slider__news .news__popular .popular__content .content__title {
    margin-bottom: 1rem;
}

.slider__news .news__popular .popular__content {
    width: calc(100% - 5rem);
}

.slider__news .news__popular .popular__content .content__title {
    color: var(--title-color);
    font-weight: bold;
    line-height: 1.5rem;
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: justify;
}

.lang__en .slider__news .news__popular .popular__content .content__title {
    text-align: left;
}

.slider__news .news__popular:hover .content__title {
    color: var(--secondary-color);
}

.popular__content .content__info {
    color: var(--info-color);
    font-size: .875rem;
    margin-top: .5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.popular__content .content__info .info__dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: var(--tips-color);
    margin: 0 .5rem;
}

.news__list .news__box {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-grey-color);
}

.news__list .news__box .news__title {
    margin: 1rem 0;
    line-height: 2rem;
    display: flex;
    flex-direction: row;
}

.news__list .news__box .news__title .title__date {
    background-color: var(--primary-color);
    color: var(--font-white-color);
    height: 2rem;
    line-height: 2rem;
    padding: 0 .5rem;
    display: inline-block;
    border-radius: 4px;
    font-size: .875rem;
}

.news__list .news__box .news__title .title {
    display: inline-block;
    color: var(--main-color);
    font-weight: bold;
    font-size: 1.25rem;
    margin-left: .5rem;
    transition: all .3s;
}

.news__list .news__box .news__title .title:hover {
    color: var(--secondary-color);
}

.news__list .news__box .news__text {
    line-height: 1.5rem;
    color: var(--info-color);
}

.news__detail {
    width: 100%;
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .news__detail {
        width: calc(100% - 22rem);
        margin-bottom: 0;
    }
}

.news__detail .detail__title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.news__detail .detail__date {
    position: relative;
    text-align: center;
    margin: 1rem 0;
    font-size: .875rem;
    color: var(--info-color);
}

.news__detail .detail__date::before,
.news__detail .detail__date::after {
    content: '';
    position: absolute;
    border-bottom: 2px solid var(--border-grey-color);
    width: calc(50% - 4rem);
    top: 50%;
    margin-top: -1px;
}

.news__detail .detail__date::before {
    left: 0;
}

.news__detail .detail__date::after {
    right: 0;
}

.news__detail .detail__content {
    margin: 1rem 0 2rem;
    flex: auto;
}

.news__detail .detail__content p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.news__detail .detail__content img {
    max-width: 100%;
    height: auto;
}

.news__detail .detail__switch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 2px solid var(--border-grey-color);
}

.detail__switch .switch__btn {
    padding-top: 2rem;
    width: 45%;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all .3s;
}

.detail__switch .switch__btn:hover {
    color: var(--secondary-color);
}

.detail__switch .switch__btn span {
    width: calc(100% - 2rem);
    overflow: hidden;
    line-height: 1.5rem;
    height: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.page__application .application__images {
    padding: 2rem 0;
    position: relative;
}

.page__application .application__images img {
    width: 100%;
    border-radius: .5rem;
    vertical-align: middle;
}

.application__images .application__link {
    position: absolute;
    left: 0;
    top: 2rem;
    width: 100%;
    height: calc(100% - 4rem);
    display: flex;
    flex-direction: row;
}

.application__images .application__link li {
    width: 20%;
}

.application__images .application__link li a {
    display: block;
    width: 100%;
    height: 100%;
}

.page__application .application__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.page__application .application__main .title {
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 1.5em;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.page__application .application__main .text {
    line-height: 1.5rem;
    text-align: justify;
}

.page__application .application__detail img {
    max-width: 100%;
    margin: 1.5rem auto;
}

.page__application .application__img {
    height: 20rem;
    width: 100%;
}

.page__application .application__detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: 2rem;
    padding-left: 0;
}

@media (min-width: 992px) {
    .page__application .application__detail {
        padding-left: 2rem;
        padding-top: 0;
    }
}

.application__detail .application__title {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.application__detail .application__text p {
    line-height: 1.5rem;
    margin-bottom: 1rem;
    text-align: justify;
}

.application__detail .application__btn {
    margin-top: 1rem;
}

.application__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
}

.page__download {
    background-color: var(--grey-color);
}

.page__download .download__contain {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.download__contain .download__slider {
    width: 20rem;
}

.download__contain .download__list {
    width: calc(100% - 22rem);
}

.download__contain .download__list .download__box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.download__box .download__format {
    padding: .25rem .5rem;
    font-size: .75rem;
    background-color: var(--secondary-color);
    border-radius: 4px;
    color: var(--font-white-color);
    margin-right: .5rem;
}

.download__box .mdui-icon {
    margin-left: 1rem;
}

.download__list .list__box {
    border-radius: .5rem;
    overflow: hidden;
    height: 15rem;
    margin-bottom: 1.5rem;
}

.download__list .list__box .download__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__service {
    background-color: var(--grey-color);
}

.page__service .service__box {
    border-radius: .5rem;
    padding: 2rem;
    background-color: var(--bg-white-color);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.service__box .servive__img {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 7rem;
    opacity: .1;
}

.service__box:first-child .servive__img {
    top: 0;
    right: 0;
}

.service__title {
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    padding-bottom: 3rem;
    color: var(--title-color);
}

.service__title::after {
    content: '';
    position: absolute;
    width: 2rem;
    height: 6px;
    border-radius: 3px;
    background-color: var(--primary-color);
    left: 0;
    bottom: 2rem;
}

.service__text p {
    margin-bottom: 1rem;
    line-height: 1.5rem;
    text-align: justify;
}

.service__text p:last-child {
    margin-bottom: 0;
}

.page__service .service__img {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    height: 20rem;
}

.page__service .service__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page__service .service__img .service__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--liner-service-color);
    padding: 2rem;
}

.service__img .service__title,
.service__img .service__text {
    color: var(--font-white-color);
    max-width: 40rem;
}

.page__support {
    background-color: var(--grey-color);
}

.page__support .mdui-panel {
    margin-bottom: 2rem;
}

.page__support .page__right .mdui-panel-item:first-child {
    margin-top: 0;
}

.page__support .mdui-panel-item {
    box-shadow: none;
    border: 0;
    overflow: hidden;
}

.page__support .mdui-panel-item-header {
    background-color: var(--primary-color);
}

.page__support .mdui-panel-item-header .mdui-icon {
    color: var(--font-white-color);
}

.page__support .mdui-panel-item-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--font-white-color);
    width: 60%;
}

.lang__en .page__support .mdui-panel-item-title {
    width: 90%;
}

.page__support .mdui-panel-item-title .mdui-icon {
    margin: -2px 10px 0 0;
}

.page__support .mdui-panel-item-body p {
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--info-color);
    padding-left: 2rem;
    position: relative;
}

.page__support .mdui-panel-item-body p::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--primary-color);
    left: .75rem;
    top: calc(.75rem - 5px);
}

.page__support .mdui-panel-item-open {
    border-radius: .5rem;
}

.page__support .mdui-panel-item-open .mdui-panel-item-body {
    padding-top: 1.5rem;
}

.page__case .split__gallery .gallery__box img {
    object-fit: cover;
}

.page__policy {
    background-color: var(--grey-color);
}

.page__policy .policy .policy__box {
    background-color: var(--bg-white-color);
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page__policy .policy .policy__box .policy__mask {
    background-color: var(--rgba7-black-color);
    padding: 1.5rem;
}

.policy .policy__box .box__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--font-white-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.5rem;
}

.policy .policy__box .box__title .iconfont {
    font-size: 1.5rem;
    margin-right: .5rem;
}

.policy__box .box__text p,
.policy__box .box__text ul {
    margin-bottom: 1rem;
    line-height: 1.5rem;
    color: var(--font-white-color);
    text-align: justify;
}

.policy__box .box__text ul li {
    padding-left: 1rem;
    position: relative;
}

.policy__box .box__text ul li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--main-color);
    position: absolute;
    left: 0;
    top: calc((1.5rem - 8px) / 2);
}

@media (min-width: 576px) {
    .page__policy .policy .policy__box .policy__mask {
        padding: 2rem 2rem 2rem 15rem;
        background-color: transparent;
    }

    .page__policy .policy .policy__box {
        background-size: contain;
        background-position: top left;
    }

    .policy .policy__box .box__title {
        color: var(--primary-color);
    }

    .policy__box .box__text p,
    .policy__box .box__text ul {
        color: var(--main-color);
    }
}

.page__resume {
    background-color: var(--grey-color);
}

.form__box {
    margin-bottom: 2rem;
}

.page__resume .resume__title {
    background-color: var(--primary-color);
    padding: .75rem 1rem;
    color: var(--font-white-color);
    font-size: 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
}

.page__resume .resume__title .title__num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    background-color: var(--bg-white-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.default__form {
    background-color: var(--bg-white-color);
    padding: 2rem 2rem 2.5rem 2rem;
}

.default__form .form__select {
    overflow: visible;
}

.form__code {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form__code input {
    width: calc(100% - 12rem) !important;
}

.form__code button {
    width: 10rem;
    text-align: center;
    cursor: pointer;
}

.default__form .form__select .mdui-select,
.default__form .mdui-textfield-input {
    width: 100%;
    font-size: .875rem;
    border-bottom: 1px solid var(--tips-color);
    color: var(--main-color);
}

.default__form .form__select .mdui-select-open.mdui-select-position-bottom {
    box-shadow: none;
}

.default__form .form__select .mdui-select-open.mdui-select-position-bottom .mdui-select-menu {
    box-shadow: 0 0 1px var(--rgba5-black-color);
}

.default__form .form__select .mdui-select-menu-item[selected] {
    color: var(--primary-color);
}

.default__form .mdui-textfield {
    overflow: visible;
}

.default__form .mdui-textfield-label {
    color: var(--info-color);
}

.default__form .mdui-textfield-label span {
    color: var(--secondary-color);
}

.default__form .mdui-textfield-focus .mdui-textfield-input,
.default__form .mdui-textfield-focus .mdui-textfield-input:hover {
    border-bottom-color: var(--tips-color);
    box-shadow: none;
}

.default__form .mdui-textfield-input:not([disabled]):hover {
    box-shadow: none;
    border-bottom: 1px solid var(--tips-color);
}

.datepicker__container {
    position: relative;
    width: 100%;
}

.datepicker__lists {
    width: 100%;
    min-height: 17.5rem;
    background-color: var(--bg-white-color);
    z-index: 10;
    overflow: hidden;
    position: absolute;
    top: 100%;
    margin-top: -1px;
    left: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 1px var(--rgba5-black-color);
}

.datepicker__lists .list__years {
    height: 17.5rem;
    overflow-y: scroll;
    width: 100%;
    box-sizing: content-box;
}

.datepicker__lists .list__years li {
    padding: 1rem;
    cursor: pointer;
}

.datepicker__lists .list__years li:hover {
    background-color: var(--primary-color);
    color: var(--font-white-color);
    outline: none;
}

.datepicker__lists .list__months {
    overflow-y: scroll;
    position: absolute;
    background-color: var(--bg-white-color);
    left: 5rem;
    top: 0;
    width: 100%;
    height: 17.5rem;
    opacity: 0;
    transform: translate(5rem, 0);
    transition: all 150ms ease-out;
}

.datepicker__lists .list__months li {
    cursor: pointer;
    padding: 1rem;
    cursor: pointer;
}

.datepicker__lists .list__months li:hover {
    background-color: var(--primary-color);
    color: var(--font-white-color);
    outline: none;
}

.datepicker__lists .datepicker__days {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--primary-color);
    padding: 1rem;
    transition: 150ms ease-out;
    transform: translate(0, 100%);
}

.datepicker__lists .datepicker__days .datepicker__month {
    width: 100%;
    font-size: 1.25rem;
    text-align: center;
    color: var(--font-white-color);
    line-height: 1em;
}

.datepicker__lists .datepicker__days .datepicker__month li {
    cursor: pointer;
}

.datepicker__lists .list__days {
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 2rem);
    margin-top: .75rem;
}

.datepicker__lists .list__days li {
    cursor: pointer;
    min-width: 14.28%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-white-color);
    border-radius: 2px;
}

.datepicker__lists .list__days li:hover,
.datepicker__lists .list__days li:focus {
    background-color: var(--bg-white-color);
    color: var(--primary-color);
    outline: none;
}

.datepicker__container.datepicker--visible .datepicker__lists {
    opacity: 1;
    visibility: visible;
    display: block;
    transform: translate(0, 0);
}

.datepicker__container.datepicker--visible .datepicker__lists .list__months {
    pointer-events: none;
}

.datepicker__container.datepicker--visible .datepicker__lists.view--month .list__months {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: auto;
}

.datepicker__container.datepicker--visible .datepicker__lists.view--day .datepicker__days {
    opacity: 1;
    transform: translate(0, 0);
}

.default__form .mdui-checkbox input[type=checkbox]:checked+.mdui-checkbox-icon::after {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.default__form .mdui-checkbox input[type=checkbox]:focus:not(:disabled):checked+.mdui-checkbox-icon {
    box-shadow: 0 0 0 15px var(--rgba1-secondary-color);
}

.resume__submit {
    text-align: center;
}

.resume__submit .mdui-checkbox {
    color: var(--secondary-color);
    font-size: .875rem;
    margin-bottom: 2rem;
}

.page__culture {
    background-color: var(--grey-color);
}

.page__culture .culture__text {
    background-color: var(--bg-white-color);
    padding: 4rem 6rem;
    border-radius: .5rem;
}

.page__culture .culture__text img {
    float: left;
    margin: 0 2rem 2rem 0;
}

.page__culture .culture__text p {
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

.page__culture .culture__text p span {
    color: var(--secondary-color);
}

.page__goal {
    background-color: var(--grey-color);
}

.page__goal .goal {
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    position: relative;
    height: 20rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
}

.page__goal .goal.goal--invert .row {
    flex-direction: row-reverse;
}

.page__goal .goal .goal__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 20rem;
    z-index: 99;
    position: relative;
    background-color: var(--rgba7-black-color);
}

.page__goal .goal .goal__title {
    font-size: 1.25rem;
    color: var(--font-white-color);
    padding-bottom: 2rem;
    font-weight: bold;
    position: relative;
}

.page__goal .goal .goal__title::after {
    content: '';
    position: absolute;
    width: 2rem;
    height: 4px;
    border-radius: 2px;
    background-color: var(--secondary-color);
    bottom: 1rem;
    left: 50%;
    margin-left: -1rem;
}

.page__goal .goal .goal__text {
    line-height: 2.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--font-white-color);
}

.goal__banner {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.goal:hover .goal__banner {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@media (min-width: 992px) {
    .page__goal .goal .goal__main {
        background-color: transparent;
    }

    .page__goal .goal .goal__title {
        color: var(--primary-color);
    }

    .page__goal .goal .goal__text {
        color: var(--main-color);
    }

    .goal__banner {
        position: relative;
        transition: all .3s;
        -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
        clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 50px 100%);
    }

    .goal--invert .goal__banner {
        -webkit-clip-path: polygon(0% 0%, calc(100% - 100px) 0%, calc(100% - 50px) 100%, 0% 100%);
        clip-path: polygon(0% 0%, calc(100% - 100px) 0%, calc(100% - 50px) 100%, 0% 100%);
    }
}

.web__map img {
    height: auto;
    width: 100%;
}
.page__contact {
    background-color: var(--grey-color);
}

.page__contact .contact {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white-color);
    padding: 2rem 0;
    border-radius: .5rem;
}

.page__contact .contact .contact__info {
    width: 100%;
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding-left: 2rem;
}

.page__contact .page__rubric {
    margin: 2rem 0;
}

.contact .contact__info .info__title,
.contact .contact__form .form__title {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
}

.contact .contact__info .info__title .title {
    margin-left: .5rem;
}

.contact .contact__info .info__text {
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--info-color);
}

.contact .contact__info .info__text:last-child {
    margin-bottom: 0;
}

.contact .contact__info .title__icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact .contact__info .title__icon .iconfont {
    font-size: 1.25rem;
}

.contact__info .info__code img {
    max-width: 100%;
    margin-top: 0.5rem;
}

.contact__info .info__code p {
    text-align: center;
    font-size: .875rem;
    padding: .5rem 0;
}

.contact .contact__form {
    width: 100%;
}

@media (min-width: 992px) {
    .page__contact .contact {
        justify-content: space-between;
        flex-direction: row;
        padding: 2rem;
    }

    .page__contact .contact .contact__info {
        width: 25rem;
        border-right: 1px solid var(--border-grey-color);
    }

    .contact .contact__form {
        width: calc(100% - 27rem);
    }
}

.page__recruit {
    background-color: var(--grey-color);
}

.page__recruit .mdui-panel {
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .page__recruit .mdui-panel {
        margin-bottom: 0;
    }
}

.page__recruit .mdui-panel-item {
    box-shadow: none;
    border-bottom: 1px solid var(--border-grey-color);
}

.page__recruit .mdui-panel-item-header {
    height: auto;
    padding: 2rem;
    flex-wrap: wrap;
    line-height: 1.5rem;
}

.page__recruit .mdui-panel-item:first-child.mdui-panel-item-open {
    margin-top: 0;
}   

.page__recruit .mdui-panel-item-header .mdui-panel-item-title {
    font-size: 1.25rem;
    color: var(--primary-color);
    font-weight: bold;
    width: 100%;
    margin-bottom: 1rem;
    overflow: visible;
    white-space: normal;
    text-overflow: normal;
}

.page__recruit .mdui-panel-item-header .mdui-panel-item-summary {
    color: var(--info-color);
}

.lang__en .page__recruit .mdui-panel-item-header .mdui-panel-item-title {
    width: 100%!important;
    margin-bottom: 1rem;
}

@media (min-width: 1200px) {
    .page__recruit .mdui-panel-item-header .mdui-panel-item-title {
        width: 36%;
        min-width: 36%;
        margin-bottom: 0;
    }
}

.page__recruit .mdui-panel-item-header .mdui-panel-item-summary .mdui-icon {
    vertical-align: bottom;
    margin-right: .5rem;
    color: var(--secondary-color);
}

.page__recruit .mdui-panel-item-body {
    padding: 0 2rem;
}

.page__recruit .mdui-panel-item-body p {
    line-height: 1.5rem;
    color: var(--main-color);
}

.page__recruit .mdui-panel-item-actions {
    margin: 1.5rem 0 0 0;
    padding: 1rem 0;
}

.page__menu {
    background: var(--primary-color);
    margin-top: 0;
    position: relative;
}

@media (min-width: 1000px) {
    .page__menu {
        background: var(--liner-page-color);
        margin-top: -4rem;
    }
}

.page__menu .menu__bg {
    background-color: var(--grey-color);
}

.page__menu .menu__title {
    color: var(--font-white-color);
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 4rem;
    width: 12rem;
    position: relative;
    padding-left: 1rem;
}

.page__menu .menu__title::after {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    background-color: var(--secondary-color);
    width: 6px;
    height: 2rem;
    border-radius: 3px;
}

.page__menu .menu__title .mdui-icon {
    font-size: 1.5rem;
    margin-right: .5rem;
}

.page__course {
    background-color: var(--grey-color);
}

.course {
    background-color: var(--bg-white-color);
    transition: all .3s;
    border-radius: .5rem;
    position: relative;
    display: block;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.course:hover {
    border-radius: 0;
}

.course::before,
.course::after {
    content: '';
    position: absolute;
    left: 0%;
    height: 3rem;
    width: 4px;
    background-color: var(--primary-color);
    transition: height 0.2s 0.35s ease-out;
}

.course::before {
    top: 50%;
}

.course::after {
    bottom: 50%;
}

.course:hover::before {
    height: 50%;
    transition: height 0.2s ease-in;
}

.course:hover::after {
    height: 50%;
    transition: height 0.1s ease-in;
}

.course .course__box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
}

.course .course__box::before,
.course .course__box::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 0%;
    background: transparent;
    opacity: 0;
    z-index: 2;
    box-sizing: border-box;
}

.course .course__box::after {
    bottom: 0;
    left: 0%;
    border-bottom: 4px solid var(--primary-color);
    transition: width 0.3s ease-in, opacity 0s 0.35s;
}

.course .course__box:hover::after {
    width: 100%;
    opacity: 1;
    transition: width 0.3s 0.2s ease-out, opacity 0s 0.2s;
}

.course .course__box::before {
    top: 0%;
    left: 0%;
    border-top: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
    transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
}

.course .course__box:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
}

.course__date {
    display: flex;
    flex-direction: column;
    color: var(--primary-color);
    width: 7rem;
}

.course__date .date__day {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: .5rem;
    color: var(--secondary-color);
}

.course__box .course__contain {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2rem 0;
}

.course__contain .contain__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--title-color);
    margin-bottom: 0.5rem;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

.page__course .slider__news .news__popular .popular__content .content__title {
    height: auto;
    margin-bottom: 0.5rem;
}

.slider__news .course__tips span {
    font-size: 12px;
}

.course__tips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}

.course__tips span {
    padding: .25rem .5rem;
    font-size: .875rem;
    background-color: var(--secondary-color);
    color: var(--font-white-color);
    border-radius: 4px;
}

.course__contain .contain__text {
    color: var(--main-color);
    line-height: 1.5rem;
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: justify;
}

.course__box .course__btn {
    display: flex;
    width: 10rem;
    align-items: center;
    justify-content: flex-start;
}

@media (min-width: 1200px) {
    .course .course__box {
        flex-direction: row;
        align-items: center;
    }

    .course__box .course__contain {
        width: calc(100% - 17rem);
        padding: 0;
    }

    .course__box .course__btn {
        justify-content: flex-end;
    }
}

.page__detection {
    background-color: var(--grey-color);
}

.page__detection .page__count {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.page__detection .page__rubric {
    margin: 1.5rem 0 2rem;
}

.index__banner .set_btn {
    color: var(--secondary-color);
    width: 2rem;
    height: 2rem;
    opacity: .5;
    transition: .5s;
    border-radius: 50%;
    user-select: none;
}

.index__banner .set_btn::before,
.index__banner .set_btn::after {
    content: '';
}

.index__banner .set_btn i {
    font-size: 2rem;
}

.swiper-button-prev.set_btn i {
    margin-left: -.15rem;
}

.swiper-button-next.set_btn i {
    margin-right: -.15rem;
}

.index__banner .set_btn:hover {
    background-color: var(--secondary-color);
    color: #fff;
    opacity: 1;
}

.index__banner .swiper-pagination {
    bottom: 2rem;
}

.index__banner .swiper-pagination .swiper-pagination-bullet {
    width: 3rem;
    height: 6px;
    border-radius: 3px;
    background-color: var(--bg-white-color);
}

.index__banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--secondary-color);
}

@media (min-width: 576px) {
    .index__banner .set_btn i {
        font-size: 3rem;
    }

    .index__banner .set_btn {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 992px) {
    .index__banner .set_btn i {
        font-size: 4rem;
    }

    .index__banner .set_btn {
        width: 4rem;
        height: 4rem;
    }
}

#cheatSheet {
    max-width: 850px;
}

#cheatSheet .sheet__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cheatSheet .sheet__title .mdui-icon {
    cursor: pointer;
}

#cheatSheet img {
    max-width: 100%;
}

.empty__text {
    width: 100%;
    text-align: center;
    padding: 7rem 0;
    background-color: var(--bg-white-color);
    border-radius: .5rem;
    margin-bottom: 2rem;
}

.empty__text .iconfont {
    font-size: 10rem;
    color: var(--tips-color);
}

.mdui-dialog-alert .mdui-dialog-content {
    font-size: 1.25rem;
    text-align: center;
    padding-bottom: .5rem;
}

.mdui-dialog-alert .mdui-dialog-actions .mdui-btn {
    color: var(--secondary-color);
    display: block;
}

.data--none {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    color: var(--info-color);
}

.cssmenu,
.cssmenu ul,
.cssmenu ul li,
.cssmenu ul li a {
    display: block;
    position: relative;
    box-sizing: border-box;
}

.cssmenu:after,
.cssmenu>ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.cssmenu>ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.cssmenu>ul>li {
    flex-grow: 1;
}

.cssmenu>ul>li>a {
    font-size: 1rem;
    color: var(--font-white-color);
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.cssmenu>ul>li:hover,
.cssmenu ul li.active:hover,
.cssmenu ul li.active,
.cssmenu ul li.has-sub.active:hover {
    background: var(--secondary-color) !important;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.cssmenu li.has-sub a {
    padding-right: 2rem
}

.cssmenu ul li.has-sub>a:after {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 8px;
    height: 2px;
    margin-top: -1px;
    display: block;
    background: var(--timeline-color);
    content: ''
}

.cssmenu ul li.has-sub>a:before {
    position: absolute;
    top: 50%;
    right: calc(1rem + 3px);
    display: block;
    width: 2px;
    height: 8px;
    margin-top: -4px;
    background: var(--timeline-color);
    content: '';
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease
}

.cssmenu ul li.has-sub:hover>a:before {
    top: calc(50% + 3px);
    height: 0
}

.cssmenu ul ul {
    position: absolute;
    left: -9999px;
    z-index: 99;
}

.cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    background: var(--bg-white-color);
    transition: all .3s ease
}

.cssmenu li:hover>ul {
    left: auto
}

.cssmenu li:hover>ul>li {
    height: 3rem
}

.cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

.cssmenu ul ul li a {
    border-bottom: 1px solid var(--grey-color);
    display: flex;
    font-size: .875rem;
    height: 100%;
    align-items: center;
    width: 17rem;
    padding-left: 1rem;
    color: var(--main-color);
}

.cssmenu ul ul li:last-child>a,
.cssmenu ul ul li.last-item>a {
    border-bottom: 0
}

.cssmenu ul ul li:hover>a,
.cssmenu ul ul li a:hover {
    color: var(--font-white-color)
}

.cssmenu ul ul li:hover {
    background: var(--secondary-color);
}

@media screen and (max-width:1000px) {
    .cssmenu {
        width: 100%;
        padding: 0;
    }

    .cssmenu .button {
        width: 4rem;
        height: 4rem;
        position: absolute;
        right: 0;
        bottom: 100%;
        cursor: pointer;
        z-index: 9;
    }

    .cssmenu .button:after {
        position: absolute;
        top: 26px;
        right: 1.25rem;
        display: block;
        height: 4px;
        width: 1.5rem;
        border-top: 2px solid var(--bg-white-color);
        border-bottom: 2px solid var(--bg-white-color);
        content: ''
    }

    .cssmenu .button:before {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        top: 20px;
        right: 1.25rem;
        display: block;
        height: 2px;
        width: 1.5rem;
        background: var(--bg-white-color);
        content: ''
    }

    .cssmenu .button.menu-opened:after {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        top: 24px;
        border: 0;
        height: 2px;
        width: 1.5rem;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .cssmenu .button.menu-opened:before {
        top: 24px;
        background: #fff;
        width: 1.5rem;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .cssmenu ul {
        width: 100%;
    }

    .cssmenu ul li {
        width: 100%;
        border-top: 1px solid var(--grey-color);
    }

    .cssmenu>ul>li:hover,
    .cssmenu ul li.active:hover,
    .cssmenu ul li.active,
    .cssmenu ul li.has-sub.active:hover {
        background-color: transparent !important;
    }

    .cssmenu ul ul li,
    .cssmenu li:hover>ul>li {
        height: auto
    }

    .cssmenu ul li a,
    .cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0;
        height: 3rem;
    }

    .cssmenu>ul>li {
        float: none
    }

    .cssmenu ul ul li a {
        padding-left: 1.5rem
    }

    .cssmenu ul ul ul li a {
        padding-left: 2rem;
    }

    .cssmenu ul ul ul ul li a {
        padding-left: 2.5rem;
    }

    .cssmenu ul ul ul ul ul li a {
        padding-left: 3rem;
    }

    .cssmenu ul ul li {
        background: var(--bg-white-color) !important;
    }

    .cssmenu ul ul li a {
        color: var(--main-color);
        background: none
    }

    .cssmenu ul ul li:hover>a,
    .cssmenu ul ul li.active>a {
        color: var(--main-color);
    }

    .cssmenu ul ul,
    .cssmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left
    }

    .cssmenu>ul>li.has-sub>a:after,
    .cssmenu>ul>li.has-sub>a:before,
    .cssmenu ul ul>li.has-sub>a:after,
    .cssmenu ul ul>li.has-sub>a:before {
        display: none
    }

    .cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid var(--bg-white-color);
        height: 3rem;
        width: 4rem;
        cursor: pointer
    }

    .cssmenu .submenu-button.submenu-opened {
        background: var(--bg-white-color)
    }

    .cssmenu .submenu-button:before,
    .cssmenu .submenu-button:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        background: var(--timeline-color);
        content: ''
    }

    .cssmenu .submenu-button:before {
        width: 2px;
        height: 8px;
        margin-left: -1px;
        margin-top: -4px;
    }

    .cssmenu .submenu-button:after {
        width: 8px;
        height: 2px;
        margin-top: -1px;
        margin-left: -4px;
    }

    .cssmenu .submenu-button.submenu-opened:before {
        display: none
    }

}

body.overflow-hidden {
    overflow: hidden;
}

.cd-section {
    text-align: center;
    position: relative;
}

.cd-section.modal-is-visible {
    z-index: 1000;
}

.cd-section p {
    margin-bottom: 2rem;
    color: var(--font-white-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page__brand .brand__img {
    max-width: 60rem;
    width: 100%;
    margin: auto;
    position: relative;
}

.page__brand .brand__img img {
    width: 100%;
    height: 30rem;
    object-fit: cover;
}

.cd-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
    -moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
    transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;
}

.cd-modal .cd-modal-content {
    height: 100%;
    width: 100%;
    padding: 3rem 5%;
    text-align: left;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cd-modal p {
    color: var(--font-white-color);
    line-height: 1.6;
    margin: 2rem 0;
    text-align: justify;
    font-weight: bold;
}

.modal-is-visible .cd-modal {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
    -moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
    transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;
}

.modal-is-visible .cd-modal .cd-modal-content {
    -webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 768px) {
    .cd-modal .cd-modal-content {
        padding: 4rem 10%;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-modal .cd-modal-content {
        padding: 6rem 20%;
    }

    .cd-modal p {
        font-size: 1.25rem;
        line-height: 2;
    }
}

.cd-modal-action {
    position: absolute;
    bottom: 2rem;
    text-align: center;
    width: 100%;
}

.cd-modal-action .btn,
.cd-modal-action .cd-modal-bg {
    display: inline-block;
    height: 4rem;
    background-color: var(--foot-color);
}

.cd-modal {
    background-image: url('../images/brand__bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cd-modal-action .btn {
    width: 12.5rem;
    border-radius: 5rem;
    color: var(--font-white-color);
    line-height: 4rem;
    white-space: nowrap;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: color 0.2s 0.3s, width 0.3s 0s;
    -moz-transition: color 0.2s 0.3s, width 0.3s 0s;
    transition: color 0.2s 0.3s, width 0.3s 0s;
}

.cd-modal-action .btn.to-circle {
    width: 4rem;
    color: transparent;
    -webkit-transition: color 0.2s 0s, width 0.3s 0.2s;
    -moz-transition: color 0.2s 0s, width 0.3s 0.2s;
    transition: color 0.2s 0s, width 0.3s 0.2s;
}

.cd-modal-action .cd-modal-bg {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    width: 4rem;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-2rem);
    -moz-transform: translateX(-2rem);
    -ms-transform: translateX(-2rem);
    -o-transform: translateX(-2rem);
    transform: translateX(-2rem);
    -webkit-transition: visibility 0s 0.5s;
    -moz-transition: visibility 0s 0.5s;
    transition: visibility 0s 0.5s;
}

.cd-modal-action .cd-modal-bg.is-visible {
    opacity: 1;
    visibility: visible;
}

.cd-modal-close {
    position: fixed;
    z-index: 1;
    top: 20px;
    right: 5%;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3) url('../images/cd-icon-close.svg') no-repeat center center;
    /* image replacement */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
    -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
    transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}

.no-touch .cd-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-is-visible .cd-modal-close {
    visibility: visible;
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
    -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
    transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

@media only screen and (min-width: 768px) {
    .cd-modal-close {
        top: 70px;
    }
}

.customer__box {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    right: -5rem;
    top: 50%;
    width: 6rem;
    transform: translateY(-50%);
    z-index: 99;
    transition: all .3s;
}

.customer__box.open {
    right: 0rem;
}

.customer__box .expand__img {
    width: 1rem;
    cursor: pointer;
    transition: all .3s;
}

.expand__img.expand__left {
    transform: rotate(180deg);
    opacity: 1;
    visibility: visible;
}

.customer__box.open .expand__left {
    opacity: 0;
    visibility: hidden;
}

.expand__img.expand__right {
    opacity: 0;
    visibility: hidden;
}

.customer__box.open .expand__right {
    opacity: 1;
    visibility: visible;
}

.customer__box ul {
    background-color: var(--bg-white-color);
    box-shadow: var(--shadow-md);
}

.customer__box ul li {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-bottom: 2px solid var(--border-grey-color);
}

.customer__box ul li .customer__code {
    position: absolute;
    right: calc(100% + 2px);
    top: 0;
    background-color: var(--bg-white-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    overflow: hidden;
    transition: all .3s;
    width: 0;
    height: 0;
    box-shadow: var(--shadow-md);
}

.customer__box ul li:hover .customer__code {
    width: 12rem;
    height: 16rem;
}

.customer__box ul li .customer__code p {
    line-height: 1.25rem;
}

.customer__box ul li .customer__code img {
    max-width: 100%;
}

.customer__box ul li .customer__icon span {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .875rem;
    color: var(--main-color);
    transition: all .3s;
    position: absolute;
}

.customer__box ul li .customer__icon span:last-child,
.customer__box ul li .customer__icon:hover span:first-child {
    opacity: 0;
}

.customer__box ul li .customer__icon:hover span:last-child {
    opacity: 1;
}

.customer__box ul li .customer__icon span i {
    font-size: 2rem;
}

.customer__wechat i {
    color: var(--wechat-color);
}

.customer__qq i {
    color: var(--qq-color);
}

.customer__tiktok i {
    color: var(--tiktok-color);
}

.customer__message i {
    color: var(--primary-color);
}

.customer__close i {
    color: var(--secondary-color);
}

.mdui-textfield-invalid .mdui-textfield-label {
    color: var(--secondary-color) !important;
}

.mdui-textfield-invalid .mdui-textfield-input {
    border-bottom: var(--secondary-color) !important;
    box-shadow: 0 1px 0 0 var(--secondary-color) !important;
}

.products__menu a:nth-child(n+5) {
    display: none !important;
}

#applySample .mdui-textfield-helper {
    color: var(--secondary-color);
    white-space: wrap;
    height: auto;
    bottom: auto;
    top: 78px;
}

.page__video {
    background-color: var(--grey-color);
}

.page__video .slider__menu {
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .page__video .slider__menu {
        margin-top: 0;
    }
}

.page__video .video__box {
    position: relative;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    cursor: pointer;
}

.video__box .img__box {
    height: 12rem;
    overflow: hidden;
}

.video__box .img__box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.video__box .video__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem 0;
    background-color: var(--bg-white-color);
    color: var(--main-color);
}

.video__box .video__title .icon__box {
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video__box .video__title .icon__box .iconfont {
    font-size: 2rem;
    color: var(--primary-color);
}

.video__box .video__title .title {
    width: calc(100% - 4rem);
    padding-right: 1rem;
    line-height: 1.5rem;
}

.video__box .video__overlay {
    background-color: var(--rgba7-black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all .5s;
}

.video__box .video__overlay .iconfont {
    color: var(--font-white-color);
    font-size: 4rem;
}

.video__box:hover .img__box img {
    transform: scale(1.1);
}

.video__box:hover .video__overlay {
    opacity: 1;
}